<template>
  <div id="iphone" v-if="data">
    <div>
      <div class="container">
        <!-- ***********************************1楼iphone13 强的很******************************* -->
        <div class="f1">
          <div class="box">
            <div class="f1-1">
              <div class="f1-1-1">
                <div class="text">
                  <img :src="data.data[0].data1[0].img1" />
                  <p>{{ data.data[0].data1[0].title }}</p>
                  <span>
                    {{ data.data[0].data1[0].from }}
                  </span>
                  <ul>
                    <li>
                      <router-link class="button1" to="/iphone13pro"
                        >购买</router-link
                      >
                    </li>
                    <li>
                      <router-link class="button2" to="/iphone13pro"
                        >进一步了解</router-link
                      >
                    </li>
                  </ul>
                  <img :src="data.data[0].data1[0].img2" />
                </div>
              </div>
              <div class="f1-1-2">
                <div class="text">
                  <img :src="data.data[0].data1[1].img1" />
                  <p>{{ data.data[0].data1[1].title }}</p>
                  <span>
                    {{ data.data[0].data1[0].from }}
                  </span>
                  <ul>
                    <li>
                      <router-link class="button1" to="/iphone13"
                        >购买</router-link
                      >
                    </li>
                    <li>
                      <router-link class="button2" to="/iphone13"
                        >进一步了解</router-link
                      >
                    </li>
                  </ul>
                </div>
                <div class="img">
                  <img :src="data.data[0].data1[1].img2" />
                </div>
              </div>
            </div>
            <div class="f1-2">
              <div class="text">
                <h6 class="text1">{{ data.data[0].data1[2].xinkuan }}</h6>
                <img :src="data.data[0].data1[2].img1" />
                <p>{{ data.data[0].data1[2].title }}</p>
                <p>{{ data.data[0].data1[2].title1 }}</p>
                <span>{{ data.data[0].data1[2].from }} </span>
                <ul>
                  <li>
                    <router-link class="button1" to="/iphoneSE"
                      >购买</router-link
                    >
                  </li>
                  <li>
                    <router-link class="button2" to="/iphoneSE"
                      >进一步了解</router-link
                    >
                  </li>
                </ul>
              </div>
              <div class="img">
                <img :src="data.data[0].data1[2].img2" />
              </div>
            </div>
          </div>
        </div>

        <!--*********************************** 2楼iphone13 和iphone13pr********************************************-->

        <div
          class="f2"
          :style="{ backgroundImage: `url(${data.data[1].data2[0].img})` }"
          style="width: 1380px; height: 836px"
        >
          <div class="box">
            <div class="f2-1">
              <h2>{{ data.data[1].data2[0].title1 }}</h2>
              <span
                >{{ data.data[1].data2[0].title2 }}<br />{{
                  data.data[1].data2[0].title3
                }}</span
              >
              <div><a class="button">观看影片</a></div>
            </div>
          </div>
        </div>
        <!--*************************** 3楼那些 iphone13 适合你**************************************-->
          <ai-mei/>  
        <!-- 4楼那些 iphone13 购买方法够多样-->
        <div class="f4">
          <h2>{{data.data[4].data5[0].title}}</h2>
          <div class="center">
            <div class="row">
              <div class="box1">
                <div class="f4-1">
                  <h3>用智能手机来换购，<br />享受折抵优惠。</h3>
                  <p>
                    {{data.data[4].data5[0].data[0].tit}}
                  </p>
                  <a   class="button2">进一步了解</a>
                </div>
                <div class="f4-2">
                  <img
                    :src="data.data[4].data5[0].data[0].img"
                  />
                </div>
              </div>

              <div class="box2">
                <div class="f4-2">
                  <h3>升级到新款 iPhone,<br />轻轻松松。</h3>
                  <p>
                     {{data.data[4].data5[0].data[1].tit}}
                  </p>
                  <a   class="button2">进一步了解</a>
                </div>
                <div class="f4-3">
                  <img
                    :src="data.data[4].data5[0].data[1].img"
                  />
                </div>
                <div class="f4-5">
                  <p>{{data.data[4].data5[0].data[1].titles}}</p>
                </div>
              </div>
            </div>
            <div class="row1" :style="{ backgroundImage: `url(${data.data[4].data5[0].datas[0].img})` }"
          >
              <div  >
                <h3>在 Apple 购买，<br />好处多多。</h3>
                <p>
                  {{data.data[4].data5[0].datas[0].tit}}
                </p>
                <a class="button2">进一步了解</a>
              </div>
            </div>
            <div class="row2" :style="{ backgroundImage: `url(${data.data[4].data5[0].datas[1].img})`  }">
              <div >
                <h3>{{data.data[4].data5[0].datas[1].title}}</h3>
                <p>{{data.data[4].data5[0].datas[1].tit}}</p>
                <a  class="button2">先睹为快</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 5楼那些 iphone13 推荐配件-->
        <div class="f5">
          <div class="center">
            <div class="row">
              <h2>{{data.data[5].data6[0].title}}</h2>
              <div class="box1">
                <div class="text">
                  <h3> {{data.data[5].data6[0].data[0].tltle}}</h3>
                  <p>
                    {{data.data[5].data6[0].data[0].tlt}}
                  </p>
                  <a class="button2">选购 MagSafe 磁吸配件</a>
                </div>
                <div>
                  <img
                    :src="data.data[5].data6[0].data[0].img"
                  />
                </div>
              </div>
              <div class="box2">
                <div>
                  <img
                    :src="data.data[5].data6[0].data[1].img"
                  />
                </div>
                <div class="text">
                  <h3>{{data.data[5].data6[0].data[1].tltle}}</h3>
                  <p>
                    {{data.data[5].data6[0].data[1].tlt}}
                  </p>
                  <router-link class="button2" to="/airtag">购买</router-link>
                  <router-link class="button2" to="/airtag"
                    >进一步了解</router-link
                  >
                </div>
              </div>
              <div class="box3"   
              :style="{ backgroundImage: `url(${data.data[5].data6[0].data[2].img})`}" 
              >
                <div>
                  <h3>{{data.data[5].data6[0].data[2].tltle}}</h3>
                  <p>{{data.data[5].data6[0].data[2].tlt}}</p>
                  <router-link class="button2" to="/airpods">购买</router-link>
                </div>
              </div>
              <div class="air">
                <a class="button2">选购各种 iPhone 配件</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 6楼  送货-->
        <div class="f6">
          <div class="center">
            <div class="box">
              <div class="box1"  v-for="data in data.data[6].data7"
                    :key="data.iid">
                <img
                  :src="data.img"
                />
                <div>
                  <h2>{{data.tltle}}</h2>
                  <p>{{data.tlt}}</p>
                  <a class="button2">进一条了解</a>
                </div>
              </div>
            </div>
            <div class="text">
              <h2>{{data.data[7].data8[0].title}}</h2>
            </div>
          </div>
        </div>
        <!-- 7楼   不一样的iphone-->
        <div class="f7">
          <div class="center">
            <div class="row"  :style="{ backgroundImage: `url(${data.data[7].data8[0].data[0].img})` }">
           
              <div class="box">
                <h3>{{data.data[7].data8[0].data[0].title}}</h3>
                <p>{{data.data[7].data8[0].data[0].tit}}</p>
                <a   class="button2">进一步了解</a>
              </div>
            </div>
            <div class="row1">
              <div class="box1">
                <div class="f7-1">
                  <h3>
                    {{data.data[7].data8[0].datas[0].title}}
                  </h3>
                  <a   class="button2">进一步了解</a>
                </div>
                <div class="f7-2">
                  <img
                    :src="data.data[7].data8[0].datas[0].img"
                  />
                </div>
              </div>
              <div class="box2"  :style="{ backgroundImage: `url(${data.data[7].data8[0].datas[1].img})`}">
                <div>
                  <h3>
                    {{data.data[7].data8[0].datas[0].title}}
                  </h3>
                  <a   class="button2">进一步了解</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 8 楼尽享iphone风采 -->
        <!-- 主体部分 -->
        <div class="f8">
          <div class="center">
            <div class="text1">
              <p>{{data.data[8].data9[0].title}}</p>
            </div>
            <div class="box">
              <div class="box1">
                <div class="text">
                  <h1>{{data.data[8].data9[0].data[0].title}}</h1>
                  <h2>{{data.data[8].data9[0].data[0].titles}}</h2>
                  <p>{{data.data[8].data9[0].data[0].titless}}</p>
                  <a  >注册 > </a>
                </div>
                <div class="img">
                  <img
                    :src="data.data[8].data9[0].data[0].img"
                  />
                </div>
              </div>
              <div class="box2">
                <div class="text">
                  <img :src="data.data[8].data9[0].data1[0].img" />
                  <p>
                    {{data.data[8].data9[0].data1[0].title}}
                  </p>
                  <a   class="button2">近一步了解</a>
                </div>
                <div class="img">
                  <img :src="data.data[8].data9[0].data1[0].img1" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import AiMei from '@/components/AiMei.vue';
export default {
 components: { AiMei },
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/iphone";
      axios.get(url).then((res) => {
        console.log(res.data);
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
#iphone {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/iphone.css"/>